<!-- 首页 -->
<template>
    <view class="home-wrap u-m-b-20">
        <shopro-navbar :isBack="false">
            <text
                slot="content"
                style="color: #000; width: 100%; text-align: left;padding-left: 20rpx;font-size:30rpx"
                @click="userInfo.password?'':denglu()"
            >
                {{userInfo.password?'平安信保中心':'去登录'}}
            </text>
        </shopro-navbar>
        <view class="content-box u-p-20 u-m-l-20 u-m-r-20 u-m-t-30">
            <view class="u-flex u-flex-col u-p-20 kehu-item">
                <view class="u-flex u-col-center u-row-left u-w-100s u-h-100s" style="color:#fff;position: relative;">
                    <view class="group-biao">
                        <image src="/static/images/bianzu.png" style="width: 50rpx;height: 50rpx;"></image>
                    </view>
                    <view class="u-m-l-14" style="font-size: 24rpx">客户存量</view>
                    <image src="/static/images/topbg.png" style="width: 220rpx;height: 200rpx;position: absolute;top: -70rpx;right: 10rpx;z-index: 0"></image>
                </view>
                <view class="u-flex u-p-10 u-w-100s u-row-between top-kehu u-p-t-40 u-p-b-40" style="z-index: 100">
                    <view class="u-flex u-flex-col u-row-left u-col-center">
                        <view class="topnum">{{ homeData.total_customers}}</view>
                        <view class="topname">总客户量</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center">
                        <view class="topnum">{{homeData.has_customers}}</view>
                        <view class="topname">分配客户量</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center">
                        <view class="topnum">{{homeData.no_customers}}</view>
                        <view class="topname">未分配客户量</view>
                    </view>
                </view>
            </view>
            <!--            员工信息-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 yuangong-item">
                <view class="u-flex u-col-center u-row-left u-w-100s u-h-100">
                    <image class="u-m-r-10" style="width: 40rpx;height: 20rpx;" src="/static/images/biaoshi.png"></image>
                    <view class="u-m-l-14" style="font-size: 24rpx">员工信息</view>
                </view>
                <view class="u-flex u-p-10 u-w-100s u-row-between top-yuangong u-p-b-20">
                    <view class="u-flex u-flex-col u-row-left u-col-center">
                        <view class="topnum">{{ homeData.total_staff }}</view>
                        <view class="topname">总员工量</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center">
                        <view class="topnum">{{homeData.new_phone}}</view>
                        <view class="topname">今日新增通话</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center">
                        <view class="topnum">{{ homeData.new_msg }}</view>
                        <view class="topname">今日新增短信</view>
                    </view>
                </view>
            </view>

            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item">
                <view class="u-flex u-col-center u-row-between u-w-100s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <image class="u-m-r-10" style="width: 40rpx;height: 20rpx;" src="/static/images/biaoshi.png"></image>
                        <view class="u-m-l-14" style="font-size: 24rpx">业务报表</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center" style="font-size:24rpx;border: 1rpx solid #2A6CFF;border-radius: 10rpx" @click="showriqi = true">
                        <view class="time-day u-flex u-row-center">{{day}}</view>
                        <view class="time-month u-flex u-row-center">{{month}}</view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-p-10 u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;border-bottom: 2rpx dashed #999">
                    <view class="chart-content" style="width: 100%;height: 200rpx">
                        <uni-ec-canvas class="uni-ec-canvas-bing" id="uni-ec-canvas-bing" ref="canvas_bing" canvas-id="uni-ec-canvas-bing" :ec="ec">
                        </uni-ec-canvas>
                    </view>
                    <view class="lenged u-flex u-flex-col">
                        <view class="wancheng u-flex u-row-left u-col-top">
                            <view class="dian u-m-r-10" style="margin-top: 10rpx;  width: 18rpx;height: 18rpx;background:rgb(0, 0, 255);border-radius: 50%"></view>
                            <view class="miaoshu">
                                <view class="timu u-m-b-8">已完成筛选数量</view>
                                <view class="u-flex u-row-between" style="font-size: 28rpx;font-weight: bold"><view>83%</view><view>1234</view></view>
                            </view>
                        </view>
                        <view class="wancheng u-flex u-row-left u-col-top">
                            <view class="dian u-m-r-10" style="margin-top: 10rpx; width: 18rpx;height: 18rpx;background:rgb(255, 127, 36);border-radius: 50%"></view>
                            <view class="miaoshu">
                                <view class="timu u-m-b-8">待完成筛选数量</view>
                                <view class="u-flex u-row-between" style="font-size: 28rpx;font-weight: bold"><view>83%</view><view>1234</view></view>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-p-10 u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="margin-top: 0rpx;">
                    <!--                        <shopro-chart :index="2" :option="baroptions"></shopro-chart>-->
                    <view class="chart-content" style="width: 100%;height: 350rpx">
                        <uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
                        </uni-ec-canvas>
                    </view>
                </view>
            </view>
            <u-calendar v-model="showriqi" :mode="mode" @change="changeDate"></u-calendar>
        </view>
    </view>
</template>

<script>

import {mapMutations, mapActions, mapState, mapGetters} from 'vuex';
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from 'echarts'

let chart = null
export default {
    components: {
        uniEcCanvas
    },
    data() {
        return {
            day:"12",
            month:"六月",
            ec        : {
                lazyLoad: true
            },
            showriqi:false,
            mode:'date',
            homeData:{},
            baroptions: {
                legend : {
                    y         : 0,
                    itemGap   : 4,               // 各个item之间的间隔，单位px，默认为10，
                    itemWidth : 8,             // 图例图形宽度
                    itemHeight: 8,            // 图例图形高度
                    textStyle : {
                        color   : 'rgb(215,217,217)',
                        fontSize: 10// 图例文字颜色
                    }
                },
                grid:{
                    x:40,
                    y:30,
                    x2:40,
                    y2:40,
                },
                tooltip: {},
                xAxis  : {
                    type       : 'category',
                    data       : ['第一周', '第二周', '第三周', '第四周', '第五周'],
                    boundaryGap: [0, 0.01],
                    axisLine   : {
                        lineStyle: {color: 'transparent', width: 1, height: 1} // x轴
                    },
                    axisLabel  : { // 控制x轴文本
                        show     : true,
                        textStyle: {color: 'rgb(215,217,217)', fontSize: 8}
                    },
                    splitLine  : {show: false},
                    scale      : true,
                    offset     : 0,
                    nameGap    : 10,
                    alignTicks : false,
                },
                yAxis  : {
                    type      : 'value',
                    splitLine : {
                        show     : true,
                        lineStyle: {
                            type   : 'dashed',
                            opacity: 0.2,
                            color  : 'rgb(215,217,217)',
                        }
                    },
                    scale     : true,
                    offset    : 0,
                    nameGap   : 20,
                    alignTicks: false,
                    axisLine  : {
                        lineStyle: {color: 'rgb(215,217,217)', width: 2, height: 1} // y轴
                    },
                    axisLabel : { // 控制y轴文本
                        show     : true,
                        textStyle: {color: 'rgb(215,217,217)', fontSize: 8}
                    }
                },
                series : [
                    {
                        type     : 'bar', name: '通话量', data: [40.1, 86.5, 24.1, 70, 60],
                        itemStyle: {
                            color       : {
                                type      : 'bar',
                                x         : 0,
                                y         : 0,
                                x2        : 0,
                                y2        : 1,
                                global    : false,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color : '#31A4FF'
                                    },
                                    {
                                        offset: 1,
                                        color : '#2A6CFF'
                                    }
                                ]
                            },
                            borderRadius: 15
                        },
                    },
                    {
                        type     : 'bar', name: '客户量', data: [30.4, 92.1, 67.2, 60, 40],
                        itemStyle: {
                            color       : {
                                type      : 'bar',
                                x         : 0,
                                y         : 0,
                                x2        : 0,
                                y2        : 1,
                                global    : false,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color : '#FEC737'
                                    },
                                    {
                                        offset: 1,
                                        color : '#FE8109'
                                    }
                                ]
                            },
                            borderRadius: 15
                        },
                    },
                    {
                        type     : 'bar', name: '短信量', data: [65.1, 85.7, 79.5, 80, 60],
                        itemStyle: {
                            color       : {
                                type      : 'bar',
                                x         : 0,
                                y         : 0,
                                x2        : 0,
                                y2        : 1,
                                global    : false,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color : '#4FF279'
                                    },
                                    {
                                        offset: 1,
                                        color : '#06BB0C'
                                    }
                                ]
                            },
                            borderRadius: 15
                        },
                    },
                ]
            },
            pieoptions: {
                series: [
                    {
                        name     : 'Access From',
                        type     : 'pie',
                        radius   : ['70%', '90%'],
                        center   : ['25%', '50%'],
                        roseType : 'radius',
                        label    : {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        emphasis : {
                            label: {
                                show: true
                            }
                        },
                        itemStyle:{
                            borderRadius:20
                        },
                        data     : [
                            {
                                value    : 35, name: '',
                                itemStyle: {
                                    color       : {
                                        x         : 0,
                                        y         : 0,
                                        x2        : 0,
                                        y2        : 1,
                                        global    : false,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color : '#31A4FF'
                                            },
                                            {
                                                offset: 1,
                                                color : '#2A6CFF'
                                            }
                                        ]
                                    },
                                    borderRadius: 15
                                }
                            },
                            {
                                value    : 20, name: '',
                                itemStyle: {
                                    color       : {
                                        x         : 0,
                                        y         : 0,
                                        x2        : 0,
                                        y2        : 1,
                                        global    : false,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color : '#FEC737'
                                            },
                                            {
                                                offset: 1,
                                                color : '#FE8109'
                                            }
                                        ]
                                    },
                                    borderRadius: 15
                                },
                            }
                        ],
                        // 鼠标移上去的item不会凸出了
                        hoverAnimation: false,
                    }
                ]
            }
        };
    },
    computed: {
        ...mapGetters(['isLogin','userInfo']),

    },
    onPullDownRefresh() {

    },

    onShow() {

    },
    onHide() {

    },
    onLoad(options) {
        this.$refs.canvas.init(this.initChart)
        this.$refs.canvas_bing.init(this.initChartBing)
        if(this.$Route.query.id){
            uni.setStorageSync('fid', this.$Route.query.id);
        }
        this.init()
    },
    methods: {
        // 初始化
        init() {
            let day = new Date().getDate();
            let month = new Date().getMonth()+1;
            console.log("===day",day,month)
            this.day = day
            this.getmonth(month)
            this.initdata()
        },
        changeDate(e){
            console.log("====e",e)
            this.day = e.day
            this.getmonth(e.month)
        },
        getmonth(month){
            switch (month) {
                case 1 :
                    this.month = '一月'
                    break;
                case 2 :
                    this.month = '二月'
                    break
                case 3 :
                    this.month = '三月'
                    break
                case 4 :
                    this.month = '四月'
                    break
                case 5 :
                    this.month = '五月'
                    break
                case 6 :
                    this.month = '六月'
                    break
                case 7 :
                    this.month = '七月'
                    break
                case 8 :
                    this.month = '八月'
                    break;
                case 9 :
                    this.month = '九月'
                    break;
                case 10 :
                    this.month = '十月'
                    break;
                case 11 :
                    this.month = '十一月'
                    break;
                case 12 :
                    this.month = '十二月'
                    break;


            }
        },
        initChart(canvas, width, height, canvasDpr) {
            console.log(canvas, width, height, canvasDpr)
            chart = echarts.init(canvas, null, {
                width           : width,
                height          : height,
                devicePixelRatio: canvasDpr
            })
            canvas.setChart(chart)
            chart.setOption(this.baroptions)
            return chart
        },
        initChartBing(canvas, width, height, canvasDpr) {
            console.log(canvas, width, height, canvasDpr)
            chart = echarts.init(canvas, null, {
                width           : width,
                height          : height,
                devicePixelRatio: canvasDpr
            })
            canvas.setChart(chart)
            chart.setOption(this.pieoptions)
            return chart
        },
        denglu() {
            this.$store.dispatch("showAuthModal", "1233");
        },
        initdata(){
            let that = this;
            that
                .$http(
                    "login.home",
                    {
                    },
                    "加载中..."
                )
                .then(res => {
                    if (res.code === 1) {
                        this.homeData = res.data
                    }
                });
        },
        // 路由跳转
        jump(path, parmas) {
            console.log("====1111", path)
            this.$Router.push({
                path : path,
                query: parmas
            });
        },
    }
};
</script>

<style lang="scss" scoped>
.uni-ec-canvas {
    width: 100%;
    height: 400rpx;
    display: block;
}
.uni-ec-canvas-bing {
    width: 100%;
    height: 200rpx;
    display: block;
}
page {
    background: #f8f8f8;
}

.kehu-item {
    border-radius: 20rpx;
    background: linear-gradient(90deg, #3357DB 0%, #3469E1 47%, #3597F1 100%);

    .top-kehu {
        background: #FFFFFF;
        border-radius: 20rpx;

        .topnum {
            font-size: 30rpx;
            margin-bottom: 10rpx;
        }

        .topname {
            font-size: 24rpx;
            color: #999999;
        }
    }
}

.yuangong-item {
    background: linear-gradient(180deg, #F1F6FF 0%, rgba(255, 255, 255, 0.9) 100%);
    box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);
    border-radius: 20rpx;

    .topnum {
        font-size: 30rpx;
        margin-bottom: 10rpx;
    }

    .topname {
        font-size: 24rpx;
        color: #999999;
    }
}

.baobiao-item {
    background: linear-gradient(180deg, #F1F6FF 0%, rgba(255, 255, 255, 0.9) 100%);
    box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);

    .time-day {
        width: 100rpx;
        background: #2A6CFF;
        color: #fff;
        padding: 6rpx 8rpx;
    }

    .time-month {
        width: 100rpx;
        background: linear-gradient(180deg, #F1F6FF 0%, rgba(255,255,255,0.9) 100%);
        box-shadow: 0px 2px 4px 0px rgba(53,110,253,0.05);
        border-radius: 10rpx;
        color: #1989fa;
        padding: 6rpx 8rpx;
    }
}
.lenged{
    position: absolute;
    top: 16rpx;
    right: 20rpx;
    width: 36vw;
    padding: 10rpx 18rpx;
    .wancheng{
        width: 100%;
        .timu{
            color: #999;
        }
    }
}
::v-deep .u-drawer{
    z-index: 1110000!important;
}
</style>
